<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="forceUpdate">强制更新</button>
        <button @click="update1">修改数组的某一个值</button>
        <button @click="update2">使用变更方法修改数组</button>
        <button @click="update3">使用非变更方法修改数组</button>
        <ul>
            <li v-for="item in arr"> {{item}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    arr:['laoli','男','抽烟喝酒打牌']
                }
            },
            methods:{
                forceUpdate(){
                    this.$forceUpdate()
                },
                update1(){
                    // 因为无法监测数组中某个值的变化 所以直接修改数组中的某个值后，视图无法更新
                    // 只有在强制更新之后 修改后的数据才能更新
                    // this.arr[0]='laowang';
                    // this.arr.length = 0
                },
                 update2(){
                    // this.arr.push('操盘手')
                    this.arr.sort()
                },
                  update3(){
                    this.arr = this.arr.filter(item=>{
                        return item != '男'
                    })
                },
            }
        })
    </script>
</body>

</html>